<template>
<com-card>
    <div slot="com_title">
        店铺管理
    </div>
    <div slot="com_content">
        <el-form  :model="shopObj" label-width="100px" size="small" style="width:500px">
            <el-form-item label="店铺名称：">
                <el-input v-model="shopObj.name"></el-input>
            </el-form-item>
            <el-form-item label="店铺公告：">
                <el-input v-model="shopObj.bulletin"></el-input>
            </el-form-item>
            <el-form-item label="店铺头像：">
                <el-upload
                    class="avatar-uploader"
                    action="http://localhost:5000/shop/upload"
                    :show-file-list="false"
                    :on-success="headerImgSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="headerUrl" :src="headerUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
            </el-form-item>

             <el-form-item label="店铺图片：">
                    <el-upload
                    action="http://localhost:5000/shop/upload"
                    list-type="picture-card"
                    :on-preview="yulan"
                    :on-remove="rm"
                    :file-list="fileList"
                    :on-success="handlerlist"
                    :before-upload="beforeAvatarUpload"
                    >
                    <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
            </el-form-item>
            <el-form-item label="配送费：">
                <el-input v-model="shopObj.deliveryPrice"></el-input>
            </el-form-item>
            <el-form-item label="配送时间：">
                <el-input v-model="shopObj.deliveryTime"></el-input>
            </el-form-item>
            <el-form-item label="描述：">
                <el-input type="textarea" v-model="shopObj.description"></el-input>
            </el-form-item>
            <el-form-item label="评分：">
                <el-input v-model="shopObj.score"></el-input>
            </el-form-item>
            <el-form-item label="销量：">
                <el-input v-model="shopObj.sellCount"></el-input>
            </el-form-item>
            <el-form-item label="活动：">
                 <el-checkbox-group v-model="cks">
                    <el-checkbox label="单人精彩套餐" border></el-checkbox>
                    <el-checkbox label="VC无限橙果汁全场8折" border></el-checkbox>
                   
                </el-checkbox-group>
            </el-form-item>
        <el-form-item label="营业时间">
              <el-date-picker
                v-model="startDate"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button @click="save">
                保存
            </el-button>
        </el-form-item>
        </el-form>
    </div>
</com-card>
</template>

<script>
import ComCard from "../../components/comcard";
import {api_shop,api_shopUpdate} from "../../api/shop.js";
    export default {
        components:{
            ComCard
        },
        data(){
            return {
                cks:[],
                startDate:[], //时间区间输入框的值
                checkList:[],
                shopObj:{}, //定义表单双向数据绑定的对象
                headerUrl:"",
                dialogImageUrl: '',  //弹窗预览中的图片的地址
                dialogVisible: false, //控制预览弹窗的显示与隐藏
                fileList:[] //已经上传的图片的列表
            }
        },
        mounted(){
            this.queryOne();
        },
        methods:{
           async save(){
                this.shopObj.date=JSON.stringify(this.startDate);
                this.shopObj.pics=JSON.stringify(this.shopObj.pics);
                this.shopObj.supports=JSON.stringify(this.cks);
               let rst= await api_shopUpdate(this.shopObj);
                let {code,msg}=rst;
                if(code==0){
                    this.$message.success(msg);
                }
               console.log(rst)
            },
            // 当图片上传成功时触发的函数
            handlerlist(res, file){
               this.shopObj.pics.push(res.imgUrl);
               this.fileList.push({
                   name:res.imgUrl,
                   url:`http://localhost:5000/upload/shop/${res.imgUrl}`
               })
            },
            //点击图片预览按钮触发的函数
            yulan(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            // 点击移出图片的函数
            rm(file, fileList) {
                console.log(file, fileList);
                this.shopObj.pics=fileList.map((item)=>{
                    return item.name
                });
                this.fileList=fileList;
            },
            // 获取店铺详情
           async queryOne(){
              let rst= await api_shop();
              this.headerUrl="http://localhost:5000/upload/shop/"+rst.data.avatar;
              this.shopObj=rst.data;
              this.startDate=rst.data.date;
              this.cks=rst.data.supports;
              this.fileList=rst.data.pics.map((item)=>{
                  return {name:item,url:`http://localhost:5000/upload/shop/${item}`}
              })
              console.log(rst);
            },
            // 头像上传成功触发的函数
      headerImgSuccess(res, file) {
          this.shopObj.avatar=res.imgUrl;
          this.headerUrl=`http://localhost:5000/upload/shop/${res.imgUrl}`;
      },
    // 头像上传之前触发的函数
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
        }
    }
</script>

<style lang="less" scoped>
/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>